<template>
    <div class="main-chat">
        <easide></easide>
        <div class="container">
            
            <!-- <div class="sidebar">
                <div class="sidebar-top">
                    <div>
                        <my-icon class="icon-margin"></my-icon>
                    </div>
                    <div class="icon-spacing">
                        <slide-icon />
                    </div>
                    <div class="icon-spacing">
                        <history-icon />
                    </div>
                </div>

                <div class="sidebar-bottom">
                    <div>
                        <phone />
                    </div>
                    <div class="icon-spacing">
                        <people />
                    </div>
                </div>
            </div> -->
            <div class="main-content">
                <div class="content-center">
                    <div class="icon-text-container">
                        <div>
                            <my-icon size="60" />
                        </div>
                        <div class="text-margin">
                            <span class="welcome-text">我是 DeepSeek，很高兴见到你！</span>
                        </div>
                    </div>
                    <div>
                        <span class="description-text">我可以帮你写代码、读文件、写作各种创意内容，请把你的任务交给我吧~</span>
                    </div>
                    <div class="input-container">
                        <el-input id="inputText" v-model="textarea" :rows="2" type="textarea"
                            placeholder="给 DeepSeek 发送消息" />
                        <div class="think-button">
                            <el-tooltip v-if="!thinkStatus" effect="dark" content="调用新模型 DeepSeek-R1，解决推理问题" placement="left-start">
                                <div @click="thinkStatus = !thinkStatus"
                                    :class="['think-toggle', { 'think-active': thinkStatus }]">
                                    <think :color="thinkStatus ? 'rgb(77, 107, 254)' : 'rgb(76, 76, 76)'" />
                                    <span :class="['think-text', { 'think-text-active': thinkStatus }]">深度思考(R1)</span>
                                </div>
                            </el-tooltip>
                            <div v-else @click="thinkStatus = !thinkStatus"
                                    :class="['think-toggle', { 'think-active': thinkStatus }]">
                                    <think :color="thinkStatus ? 'rgb(77, 107, 254)' : 'rgb(76, 76, 76)'" />
                                    <span :class="['think-text', { 'think-text-active': thinkStatus }]">深度思考(R1)</span>
                                </div>
                        </div>

                        <div class="internet-button">
                            <el-tooltip v-if="!intenetStatus" effect="dark" content="按需搜索网页" placement="right-end">
                                <div @click="intenetStatus = !intenetStatus"
                                    :class="['internet-toggle', { 'internet-active': intenetStatus }]">
                                    <intenet :color="intenetStatus ? 'rgb(77, 107, 254)' : 'rgb(76, 76, 76)'" />
                                    <span :class="['internet-text', { 'internet-text-active': intenetStatus }]">联网搜索</span>
                                </div>
                            </el-tooltip>
                            <div v-else @click="intenetStatus = !intenetStatus"
                                :class="['internet-toggle', { 'internet-active': intenetStatus }]">
                                <intenet :color="intenetStatus ? 'rgb(77, 107, 254)' : 'rgb(76, 76, 76)'" />
                                <span :class="['internet-text', { 'internet-text-active': intenetStatus }]">联网搜索</span>
                            </div>
                        </div>

                        <div class="upload-button">
                            <upload />
                        </div>

                        <div :class="['send-button', { 'send-button-disabled': textarea === '' }]">
                            <send />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'

//文本
const textarea = ref('')
const intenetStatus = ref(false)
const thinkStatus = ref(false)
function changeThinkStatus() {
    thinkStatus.value = !thinkStatus.value
}
function changeIntenetStatus() {
    intenetStatus.value = !intenetStatus.value
}
</script>

<style>
.main-chat{
    display: flex;
    width: 100vw;
    height: 100vh;
    flex-direction: row;
    /* background-color: #4d6bfe; */
    z-index: 999;
}
.container {
    display: flex;
    flex: 1;
    height: 100%;
    position: relative;
    /* background-color: #c90000; */
}

.sidebar {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #ccc;
    width: 68px;
    position: fixed;
    left: 0;
    top: 0;
    justify-content: space-between;
}

.sidebar-top {
    display: flex;
    flex-direction: column;
    margin-top: 19px;
    align-items: center;
    justify-content: center;
}

.icon-margin {
    margin-left: 2px;
}

.icon-spacing {
    margin-top: 35px;
}

.sidebar-bottom {
    display: flex;
    flex-direction: column;
    margin-bottom: 13px;
}

.main-content {
    flex: 1;
    background-color: #ffffff;
    height: 100%;
    /* margin-left: 68px; */
    /* width: 100%; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.content-center {
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.icon-text-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.text-margin {
    margin-left: 10px;
}

.welcome-text {
    column-gap: 14px;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI;
    font-size: 24px;
    font-weight: 500;
}

.description-text {
    color: rgb(64, 64, 64);
    font-size: 14px;
    margin-top: 10px;
}

.input-container {
    position: relative;
}

#inputText {
    width: 632px;
    height: 122px;
    border-radius: 24px;
    padding-left: 10px;
    background-color: rgba(0, 0, 0, 0);
    padding: 10px;
    margin-top: 15px;
    position: relative;
}

.think-button {
    position: absolute;
    bottom: 12px;
    left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}
/* .think-button:hover {
    cursor: pointer;
    
} */
.think-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 14px;
    width: 112px;
    height: 28px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgba(0, 122, 255, 0.15);
    cursor: pointer;
}

.think-active {
    background-color: rgb(219, 234, 254);
}

.think-text {
    font-size: 12px;
    color: rgb(76, 76, 76);
}

.think-text-active {
    color: rgb(77, 107, 254);
}

.internet-button {
    position: absolute;
    bottom: 12px;
    left: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.internet-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 14px;
    width: 86px;
    height: 28px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgba(0, 122, 255, 0.15);
    cursor: pointer;
}

.internet-active {
    background-color: rgb(219, 234, 254);
}

.internet-text {
    font-size: 12px;
    color: rgb(76, 76, 76);
}

.internet-text-active {
    color: rgb(77, 107, 254);
}

.upload-button {
    position: absolute;
    bottom: 11px;
    right: 70px;
    width: 23px;
    height: 23px;
    border-radius: 10px;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 3px;
}

.send-button {
    position: absolute;
    bottom: 11px;
    right: 15px;
    font-weight: bold;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #4d6bfe;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    cursor: pointer;
}

.send-button-disabled {
    background-color: #4d6bfe
}
</style>